<template>
	<view class="orderInfo" :style="{height: orderHeight+'px'}">
		<view class="info box d-jc-sb d-ai-c">
			<view class="info_left">
				<view class="box">
					<view class="">
						订单编号：
					</view>
					<view class="">
						{{orderInfo.orderNo}}
					</view>
				</view>
				<view class="box mt-1">
					<view class="">
						订单类型：
					</view>
					<view class="" v-if="orderInfo.type==1">
						门诊陪伴
					</view>
					<view class="" v-if="orderInfo.type==2">
						血透门诊陪伴
					</view>
					<view class="" v-if="orderInfo.type==3">
						代配药门诊陪伴
					</view>
				</view>
				<view class="box mt-1">
					<view class="">
						订单来源：
					</view>
					<view class="" v-if="orderInfo.source==1">
						后台派单
					</view>
					<view class="" v-if="orderInfo.source==2">
						自费下单
					</view>
				</view>
			</view>
			<view class="info_right" @tap="callphonekefu">
				联系客服
			</view>
		</view>
		<view class="serverObject box d-ai-c d-jc-sb">
			<view class="">
				服务对象：{{orderInfo.name}} {{orderInfo.phone}}
			</view>
			<view class="" @tap="callPhone(orderInfo.phone)">
				联系用户
			</view>
		</view>
		<view class="goinfo box d-ai-c d-jc-sb">
			<view class="goinfolist box">
				<view class="">
					出发
				</view>
				<view class="ml-1">
					{{orderInfo.startTime | dateFormatYear}}
				</view>
			</view>
			<view class="goinfolist box">
				<view class="">
					距离
				</view>
				<view class="ml-1">
					{{orderInfo.distance/1000}}公里
				</view>
			</view>
			<view class="goinfolist box">
				<view class="">
					方式
				</view>
				<view class="ml-1" v-if="orderInfo.tripType==1">
					公交车
				</view>
				<view class="ml-1" v-if="orderInfo.tripType==2">
					网约车
				</view>
				<view class="ml-1" v-if="orderInfo.tripType==3">
					步行
				</view>
				<view class="ml-1" v-if="orderInfo.tripType==4">
					非急救转运
				</view>
			</view>
		</view>
		<view class="goaddress box d-ai-c d-jc-sb">
			<view class="box goaddressleft">
				<view class="">
					出发地点：
				</view>
				<view class="">
					{{orderInfo.startAddress}}
				</view>
			</view>
			<view class="goaddressright" @tap="openlocation">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/daohang@2x.png" mode=""></image>
				<view class="">
					导航
				</view>
			</view>
		</view>
		<view class="goaddress box d-ai-c d-jc-sb">
			<view class="box goaddressleft">
				<view class="">
					目的地点：
				</view>
				<view class="">
					{{orderInfo.hospitalName}}
				</view>
			</view>
			<view class="goaddressright" @tap="openlocationhoisp">
				<image src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/daohang@2x.png" mode=""></image>
				<view class="">
					导航
				</view>
			</view>
		</view>
		<view class="disease">
			所患疾病：{{orderInfo.disease==null?'无':orderInfo.disease}}
		</view>
		<view class="disease">
			目前症状：{{orderInfo.symptom==null?'无':orderInfo.symptom}}
		</view>
		<view class="remark box d-ai-c">
			<view class="box remarkInfo">
				<view class="">
					备注：
				</view>
				<view class="" v-if="orderInfo.source==2">
					{{orderInfo.remark1==null?'暂无备注':orderInfo.remark1}}
				</view>
				<view class="" v-if="orderInfo.source==1">
					{{orderInfo.remark2==null?'暂无备注':orderInfo.remark2}}
				</view>
			</view>
		</view>
		<view class="content">
			<view class="progress box d-ai-c">
				<view class="left ml-2">
					{{orderInfo.accompanyReceiveStatus[0].createTime==undefined?'':orderInfo.accompanyReceiveStatus[0].createTime}}
				</view>
				<view class="center ml-2">
				</view>
				<!-- 已经接单 -->
				<view class="right ml-2">
					已经接单
				</view>
				<view class="line">
				
				</view>
			</view>
			<view class="progress box d-ai-c">
				<view class="left ml-2">
					{{orderInfo.accompanyReceiveStatus[1].createTime==undefined?'':orderInfo.accompanyReceiveStatus[1].createTime}}
				</view>
				<!-- <view class="ml-2" :class="orderInfo.accompanyReceiveStatus.length>=1?'center':'center1'">
				</view> -->
				<view class="ml-2 center" v-if="orderInfo.accompanyReceiveStatus.length>=1">
					
				</view>
				<view class="ml-2 center1" v-else-if="orderInfo.accompanyReceiveStatus.length<1">
					
				</view>
				<view class="ml-2">
					<view class="blue"  @tap="startserver(1)" v-if="orderInfo.accompanyReceiveStatus[1]==undefined">
						开始服务
					</view>
					<view class="grey1 box" v-if="orderInfo.accompanyReceiveStatus[1]!==undefined">
						[开始服务]：{{orderInfo.accompanyReceiveStatus[1].address}}
						
					</view>
				</view>
				<!-- <view :class="orderInfo.accompanyReceiveStatus.length>1?'line':'line1'">
				
				</view> -->
				<view class="line" v-if="orderInfo.accompanyReceiveStatus.length>1">
					
				</view>
				<view class="line1" v-if="orderInfo.accompanyReceiveStatus.length<=1">
					
				</view>
			</view>
			<view class="progress box d-ai-c">
				<view class="left ml-2">
					{{orderInfo.accompanyReceiveStatus[2].createTime==undefined?'':orderInfo.accompanyReceiveStatus[2].createTime}}
				</view>
				<!-- <view class="ml-2" :class="orderInfo.accompanyReceiveStatus.length>=2?'center':'center1'"> -->
				<!-- </view> -->
				<view class="ml-2 center" v-if="orderInfo.accompanyReceiveStatus.length>=2">
					
				</view>
				<view class="ml-2 center1" v-if="orderInfo.accompanyReceiveStatus.length<2">
					
				</view>
				
				<view class="ml-2">
					<view class="blue"  @tap="startserver(2)" v-if="orderInfo.accompanyReceiveStatus.length==2">
						抵达地点
					</view>
					<view class="grey" v-if="orderInfo.accompanyReceiveStatus.length!==2&&orderInfo.accompanyReceiveStatus[2]==undefined">
						抵达地点
					</view>
					<view class="grey1" v-if="orderInfo.accompanyReceiveStatus.length!==2&&orderInfo.accompanyReceiveStatus[2]!==undefined">
						[抵达地点]：{{orderInfo.accompanyReceiveStatus[2].address}}
					</view>
				</view>
				<!-- <view :class="orderInfo.accompanyReceiveStatus.length>2?'line':'line1'">
				
				</view> -->
				<view class="line" v-if="orderInfo.accompanyReceiveStatus.length>2">
					
				</view>
				<view class="line1" v-if="orderInfo.accompanyReceiveStatus.length<=2">
					
				</view>
			</view>
			<view class="progress box d-ai-c">
				<view class="left ml-2">
					{{orderInfo.accompanyReceiveStatus[3].createTime==undefined?'':orderInfo.accompanyReceiveStatus[3].createTime}}
				</view>
				<!-- <view class="ml-2" :class="orderInfo.accompanyReceiveStatus.length>=3?'center':'center1'"> -->
				<!-- </view> -->
				<view class="ml-2 center" v-if="orderInfo.accompanyReceiveStatus.length>=3">
					
				</view>
				<view class="ml-2 center1" v-if="orderInfo.accompanyReceiveStatus.length<3">
					
				</view>
				
				<view class="ml-2">
					<view class="blue" @tap="openupload(orderInfo.accompanyReceiveStatus[0].accompanyReceiveNo,orderInfo.orderNo)" v-if="orderInfo.accompanyReceiveStatus.length==3">
						离开地点
					</view>
					<view class="grey" v-if="orderInfo.accompanyReceiveStatus.length!==3&&orderInfo.accompanyReceiveStatus[3]==undefined">
						离开地点
					</view>
					<view class="grey1" v-if="orderInfo.accompanyReceiveStatus.length!==3&&orderInfo.accompanyReceiveStatus[3]!==undefined">
						[离开地点]：{{orderInfo.accompanyReceiveStatus[3].address}}
					</view>
				</view>
				<!-- <view :class="orderInfo.accompanyReceiveStatus.length>3?'line':'line1'">
				
				</view> -->
				<view class="line" v-if="orderInfo.accompanyReceiveStatus.length>3">
					
				</view>
				<view class="line1" v-if="orderInfo.accompanyReceiveStatus.length<=3">
					
				</view>
			</view>
			<view class="progress box d-ai-c">
				<view class="left ml-2">
					{{orderInfo.accompanyReceiveStatus[4].createTime==undefined?'':orderInfo.accompanyReceiveStatus[4].createTime}}
				</view>
				<!-- <view class="ml-2" :class="orderInfo.accompanyReceiveStatus.length>=4?'center':'center1'"> -->
				<!-- </view> -->
				<view class="ml-2 center" v-if="orderInfo.accompanyReceiveStatus.length>=4">
					
				</view>
				<view class="ml-2 center1" v-if="orderInfo.accompanyReceiveStatus.length<4">
					
				</view>
				<view class="ml-2 ">
					<view class="blue" @tap="endServer(orderInfo.accompanyReceiveStatus[0].accompanyReceiveNo,orderInfo.orderNo)" v-if="orderInfo.accompanyReceiveStatus.length==4">
						结束服务
					</view>
					<view class="grey" v-if="orderInfo.accompanyReceiveStatus.length!==4&&orderInfo.accompanyReceiveStatus[4]==undefined">
						结束服务
					</view>
					<view class="grey1" v-if="orderInfo.accompanyReceiveStatus.length!==4&&orderInfo.accompanyReceiveStatus[4]!==undefined">
						[结束服务]：{{orderInfo.accompanyReceiveStatus[4].address}}
					</view>
				</view>
			</view>
		</view>
		<orange-fullloading textcolor="#4CA6FF" textsize="30" :loadshow="loadshow" text="加载中"></orange-fullloading>
	</view>
</template>

<script>
	import mSidebar from "@/components/m-sidebar/m-sidebar.vue"
	import mSteps from '@/components/m-steps/m-steps.vue'
	export default {
		components: {
			mSidebar,
			mSteps
		},
		data() {
			return {
				orderInfo:'',
				orderNo:'',
				orderHeight:400,
				activity: 0,
				longitude:'',
				latitude:'',
				vadio:false,
				vadio1:false,
				loadshow:true
			}
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.orderHeight = res.windowHeight - uni.upx2px(110) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		onLoad(option) {
			this.orderNo = option.orderNo
			this.orderdetails()
			this.getlocation()
		},
		onShow() {
			let carData = ''
			let _this = this
			uni.$on("trigger", (rel) => {
				carData = rel
				if (carData == 1) {
					_this.orderdetails()
				}else if(carData == 2){
					_this.orderdetails()
				}
			})
			_this.onLoad()
			_this.orderdetails()
		},
		methods: {
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber:phone //仅为示例
				});
			},
			callphonekefu(){
				uni.makePhoneCall({
					phoneNumber:'4008-702-365' //仅为示例
				});
			},
			openlocation(){
				if(!this.vadio){
					this.vadio = true
					this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/1640594308PBcv.mp3')
					setTimeout(()=>{					
						uni.openLocation({
								latitude: this.orderInfo.startLatitude,
								longitude: this.orderInfo.startLongitude,
							    address:this.orderInfo.startAddress,
							    success: function () {
							        console.log('success');
						}
						});
						this.vadio = false
					},1300)
				}
				
				
			},
			openlocationhoisp(){
				if(!this.vadio1){
					this.vadio1 = true
					this.audioplay('https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/1640594308PBcv.mp3')
					setTimeout(()=>{					
						uni.openLocation({
								latitude: this.orderInfo.startLatitude,
								longitude: this.orderInfo.startLongitude,
							    address:this.orderInfo.startAddress,
							    success: function () {
							        console.log('success');
						}
						});
						this.vadio1 = false
					},1300)
				}
			},
			openupload(accompanyReceiveNo,orderNo){
				uni.navigateTo({
					url:'Uploadmaterial?accompanyReceiveNo='+accompanyReceiveNo+'&orderNo='+orderNo
				})
			},
			endServer(accompanyReceiveNo,orderNo){
				uni.navigateTo({
					url:'../mine/endServer?accompanyReceiveNo='+accompanyReceiveNo+'&orderNo='+orderNo
				})
			},
			getlocation(){
				let _this = this
				uni.getLocation({
				    type: 'gcj02',
				    success:  function(res) {
				        console.log('当前位置的经度：' + res.longitude);
				        console.log('当前位置的纬度：' + res.latitude);
						_this.longitude = res.longitude
						_this.latitude = res.latitude
				    }
				});
			},
			startserver(status){
				this.$api.orderreceivingstatus({
					orderNo:this.orderNo,
					status:status,
					startLongitude:this.longitude,
					startLatitude:this.latitude,
				}).then((res) => {
					if(res.data.success){
						console.log(res.data.dataMap)
						// this.orderInfo = res.data.dataMap
						this.orderdetails()
						this.onLoad()
					}else{
						uni.showToast({
							title:res.data.message,
							icon:'none'
						})
					}
					
							
				})
			},
			orderdetails(){
				this.$api.orderdetails({
					orderNo:this.orderNo
				}).then((res) => {
					this.loadshow = false
					if(res.data.success){
						console.log(res.data.dataMap)
						this.orderInfo = res.data.dataMap
						for(var i = 0;i<this.orderInfo.accompanyReceiveStatus.length;i++){
							this.orderInfo.accompanyReceiveStatus[i].createTime = this.timechange(this.orderInfo.accompanyReceiveStatus[i].createTime)
						}
					}
					
							
				})
			},
			timechange(originVal) {
				const dt = new Date(originVal.replace(/-/g,'/'))
				const y = dt.getFullYear()
				const m = (dt.getMonth() + 1 + '').padStart(2, '0')
				const d = (dt.getDate() + '').padStart(2, '0')
				//padStart(2,'0') 意思是不足两位自动补0
				const hh = (dt.getHours() + '').padStart(2, '0')
				const mm = (dt.getMinutes() + '').padStart(2, '0')
				const ss = (dt.getSeconds() + '').padStart(2, '0')
				return `${m}-${d} ${hh}:${mm}`
			
			},
		}
	}
</script>

<style lang="less" scoped>
.orderInfo{
	background: #F2F7FF;
}
.info{
	width: 690rpx;
	height: 155rpx;
	padding: 40rpx 30rpx;
	background: linear-gradient(90deg, #5B5F6A 0%, #353D4E 100%);
	.info_left{
		view:nth-child(1){
			font-size: 28rpx;
			font-weight: 500;
			color: #CCCCCC;
		}
		view:nth-child(2){
			font-size: 28rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.info_right{
		width: 180rpx;
		height: 68rpx;
		border: 2rpx solid #FF8338;
		border-radius: 10rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #FF8338;
		line-height: 68rpx;
		text-align: center;
	}
}
.serverObject{
	width: 690rpx;
	height: 128rpx;
	padding: 0 30rpx;
	background: #FFFFFF;
	margin-bottom: 2rpx;
	view:nth-child(1){
		font-size: 30rpx;
		font-weight: 500;
		color: #333333;
	}
	view:nth-child(2){
		width: 180rpx;
		height: 68rpx;
		background: #4CA6FF;
		border-radius: 34rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		line-height: 68rpx;
	}
}
.goinfo{
	width: 690rpx;
	height: 86rpx;
	padding: 0 30rpx;
	background: #FFFFFF;
	.goinfolist{
		view:nth-child(1){
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
		}
		view:nth-child(2){
			font-size: 30rpx;
			font-weight: bold;
			color: #FF8833;
		}
	}
}
.goaddress{
	width: 690rpx;
	height: 80rpx;
	background: #FFFFFF;
	padding: 20rpx 30rpx;
	image{
		width: 48rpx;
		height: 48rpx;
	}
	.goaddressleft{
		view:nth-child(1){
			width: 140rpx;
			font-size: 28rpx;
			font-weight: 500;
			color: #666666;
		}
		view:nth-child(2){
			width: 470rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.goaddressright{
		text-align: center;
		view{
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;
		}
	}
}
.disease{
	width: 690rpx;
	height: 86rpx;
	padding: 0 30rpx;
	background: #FFFFFF;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 86rpx;
	
}
.remark{
	margin-top: 2rpx;
	width:690rpx;
	height: 120rpx;
	padding: 0 30rpx;
	background: #FFFFFF;
	.remarkInfo{
		view:nth-child(1){
		width: 90rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
	view:nth-child(2){
		width:600rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
	}
	}
	
}
.content{
	margin-top: 30rpx;
	width: 750rpx;
	height: 588rpx;
	background: #FFFFFF;
}
.progress{
	width: 690rpx;
	height: 120rpx;
	padding: 0rpx 30rpx;
	position: relative;
	.blue{
		width: 180rpx;
		height: 80rpx;
		background: #4CA6FF;
		line-height: 80rpx;
		text-align: center;
		font-size: 26rpx;
		border-radius: 12rpx;
		color: #FFFFFF;
	}
	.grey{
		font-size: 26rpx;
		font-weight: 500;
		color: #AAAAAA;
	}
	.grey1{
		width: 500rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #4CA8FD;
	}
	.left{
		width: 79rpx;
		height: 48rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #4CA8FD;
	}
	.right{
		width: 526rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #4CA8FD;
	}
	.center{
		width: 24rpx;
		height: 24rpx;
		background: #4CA6FF;
		border-radius: 50%;
	}
	.center1{
		width: 24rpx;
		height: 24rpx;
		background: #AAAAAA;
		border-radius: 50%;
	}
	.line{
			width: 2rpx;
			height: 112rpx;
			background: #4CA8FD;
			position: absolute;
			top: 73rpx;
			left: 158rpx;
	}
	.line1{
			width: 2rpx;
			height: 112rpx;
			background: #AAAAAA;
			position: absolute;
			top: 73rpx;
			left: 158rpx;
	}
}
</style>
